<template>
  <div class="app-container bg-gray">
    <el-card class="box-1">
      <div slot="header"><span>{{ title }}</span></div>
      <el-form ref="form" :model="form" :rules="formRules" label-width="160px">
        <el-form-item label="活动名称" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="副标题" prop="explain">
          <el-input v-model="form.explain" />
        </el-form-item>
        <el-form-item label="活动地点" prop="place">
          <el-input v-model="form.place"/>
        </el-form-item>
        <el-form-item label="活动时间" prop="date">
          <el-date-picker
            v-model="form['date']"
            class="picker"
            type="datetimerange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"/>
        </el-form-item>
        <el-form-item label="报名截止" prop="stop_time">
          <el-date-picker v-model="form['stop_time']" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" />
        </el-form-item>
        <el-form-item label="主办方" prop="host_party">
          <el-input v-model="form['host_party']" />
        </el-form-item>
        <el-form-item label="联系方式" prop="host_contact">
          <el-input v-model="form['host_contact']" />
        </el-form-item>
        <!--<el-form-item label="参与费用(元/人)">
          <el-input v-model="form['cost']" />
        </el-form-item>-->
        <el-form-item label="活动图片" prop="picture">
          <div class="remark">*注:为保证显示效果,请上传一张375px*214px的图片</div>
          <ws-upload-single-img v-model="form['picture']" :path="form['picture']?(ImageUrl+form['picture']):''"/>
        </el-form-item>
        <el-form-item label="活动须知" prop="regulations">
          <el-input v-model="form['regulations']" :rows="3" type="textarea"/>
        </el-form-item>
        <el-form-item label="活动详情" prop="details">
          <ws-editor v-model="form['details']"/>
        </el-form-item>
        <el-form-item label="人数限制" prop="limit_number">
          <el-input v-model="form['limit_number']" />
        </el-form-item>
        <el-form-item label="活动类型" prop="activity_type_id">
          <el-select v-model="form['activity_type_id']" placeholder="请选择商品" filterable>
            <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id+''"/>
          </el-select>
        </el-form-item>
        <el-form-item label="审核方式" prop="audit_mode">
          <el-radio-group v-model="form['audit_mode']">
            <el-radio :label="0">手动通过</el-radio>
            <el-radio :label="1">自动审核</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="通知方式" prop="notice">
          <el-radio-group v-model="form['notice']">
            <el-radio :label="1">微信</el-radio>
            <el-radio :label="2">短信</el-radio>
            <el-radio :label="3">短信&微信</el-radio>
          </el-radio-group>
        </el-form-item>
        <div style="text-align:center">
          <el-button type="primary" @click="submitForm('form')">保存</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // ImageUrl: this.$store.getters.serverUrl,
      ImageUrl: '',

      title: '创建活动',

      fromId: '',

      dialogImageUrl: '',
      showImageDialog: false,

      typeList: [], // 活动类型列表

      form: {
        date: [],
        stop_time: ''
      },
      formRules: {
        name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        explain: [{ required: true, message: '请输入活动简介', trigger: 'blur' }],
        place: [{ required: true, message: '请输入活动地点', trigger: 'blur' }],
        date: [{ required: true, message: '请选择活动时间', trigger: 'blur' }],
        stop_time: [{ required: true, message: '请选择报名截止时间', trigger: 'blur' }],
        host_party: [{ required: true, message: '请输入主办方', trigger: 'blur' }],
        host_contact: [{ required: true, message: '请输入主办方电话', trigger: 'blur' }],
        picture: [{ required: true, message: '请输入活动封面图', trigger: 'blur' }],
        regulations: [{ required: true, message: '请输入活动规则', trigger: 'blur' }],
        details: [{ required: true, message: '请输入活动详情', trigger: 'blur' }],
        limit_number: [{ required: true, message: '请输入活动人数', trigger: 'blur' }],
        activity_type_id: [{ required: true, message: '请选择活动类型id', trigger: 'blur' }],
        audit_mode: [{ required: true, message: '请选择审核方式', trigger: 'blur' }],
        notice: [{ required: true, message: '请选择通知方式', trigger: 'blur' }]
      }
    }
  },
  watch: {
  },
  created() {
    this.fromId = this.$route.query.fromId || '';
    if (this.$route.query.id) {
      this.form.id = this.$route.query.id || '';
      this.title = '编辑活动'
    }
    this.getTypeList()
  },
  methods: {
    /**
     *  获取活动类型列表
     */
    getTypeList() {
      const url = 'activity/getTypeList'
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.typeList = res.data
        if (this.form['id'] || this.fromId) {
          this.loadData()
        }
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },
    loadData() {
      console.log(this.fromId)
      const url = 'activity/getActivityInfo/' + (this.form['id'] || this.fromId)
      this.$store.dispatch('GetConnect', { url }).then(res => {
        const temp = Object.assign({}, res.data)
        temp['date'] = [res.data['start_time'], res.data['end_time']]
        this.form = temp
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const url = (this.form.id && !this.fromId) ? 'activity/updateActivity' : 'activity/addActivity';
          const data = Object.assign({}, this.form)
          data['date'] && data['date'].length !== 0 && (data['start_time'] = data['date'][0], data['end_time'] = data['date'][1])
          this.$store.dispatch('GetConnect', { url, data }).then(res => {
            this.$message.success(res.msg)
            this.$router.back(-1)
          }).catch((err) => {
            this.$message.error(err.msg)
          })
        } else {
          this.$message.error('提交失败,请检查必填项')
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../../styles/index.scss';
  .box-1 {
    max-width: 1000px;
    margin: 0 auto;
    > div span {
      font-size: 18px;
      font-weight: 600;
      padding: 0 10px;
    }
    .el-form {
      max-width: 900px;
      .title {
        font-weight: 600;
      }
      .remark {
        font-size: 13px;
        color: $textGray;
      }
      .el-button {
        @extend .bg-green;
        width: 20%;
        min-width: 160px;
      }
    }
  }
  .el-checkbox {
    margin-right: 30px;
  }
  .el-checkbox + .el-checkbox {
    margin-left: 0;
    margin-right: 30px;
  }
</style>
